{% extends "base.html" %}

{% block title %}新建提示词 - 提示词管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="bi bi-plus-circle"></i> 
                新建提示词
            </h1>
            <a href="{{ url_for('prompts') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">提示词信息</h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="title" class="form-label">标题 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="title" name="title" required placeholder="请输入提示词标题">
                    </div>
                    
                    <div class="mb-3">
                        <label for="content" class="form-label">内容 <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="content" name="content" rows="8" required placeholder="请输入提示词内容，可以使用 {{变量名}} 定义变量"></textarea>
                        <div class="form-text">
                            提示：使用 <code>{{变量名}}</code> 格式定义变量，例如：<code>{{角色}}</code>、<code>{{技能}}</code>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="category_id" class="form-label">分类</label>
                        <select class="form-select" id="category_id" name="category_id">
                            {% for category in categories %}
                                <option value="{{ category.id }}" {% if category.id == 'default' %}selected{% endif %}>
                                    {{ category.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="tags" class="form-label">标签</label>
                        <input type="text" class="form-control" id="tags" name="tags" placeholder="请输入标签，用逗号分隔，例如：编程,AI,助手">
                        <div class="form-text">多个标签请用逗号分隔</div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="enabled" name="enabled" checked>
                            <label class="form-check-label" for="enabled">
                                启用此提示词
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('prompts') }}" class="btn btn-outline-secondary me-md-2">
                            <i class="bi bi-x-circle"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- 预览区域 -->
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-eye"></i> 
                    实时预览
                </h6>
            </div>
            <div class="card-body">
                <div id="preview">
                    <h6 id="previewTitle" class="text-muted">请输入标题</h6>
                    <div id="previewContent" class="text-muted">请输入内容</div>
                    <div id="previewVariables" class="mt-2"></div>
                    <div id="previewTags" class="mt-2"></div>
                </div>
            </div>
        </div>
        
        <!-- 帮助信息 -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-question-circle"></i> 
                    使用帮助
                </h6>
            </div>
            <div class="card-body">
                <h6>变量语法</h6>
                <p class="small">使用双大括号定义变量：<code>{{变量名}}</code></p>
                
                <h6>标签规则</h6>
                <p class="small">多个标签用逗号分隔，建议使用简短的关键词</p>
                
                <h6>分类说明</h6>
                <p class="small">选择合适的分类有助于更好地组织和查找提示词</p>
                
                <h6>示例</h6>
                <div class="bg-light p-2 rounded">
                    <small>
                        <strong>标题：</strong>代码审查助手<br>
                        <strong>内容：</strong>请作为一个{{语言}}专家，审查以下代码并提供{{类型}}建议。<br>
                        <strong>标签：</strong>编程,代码审查,AI助手
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 实时预览功能
document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.getElementById('title');
    const contentInput = document.getElementById('content');
    const tagsInput = document.getElementById('tags');
    
    const previewTitle = document.getElementById('previewTitle');
    const previewContent = document.getElementById('previewContent');
    const previewVariables = document.getElementById('previewVariables');
    const previewTags = document.getElementById('previewTags');
    
    function updatePreview() {
        // 更新标题
        const title = titleInput.value.trim();
        previewTitle.textContent = title || '请输入标题';
        previewTitle.className = title ? '' : 'text-muted';
        
        // 更新内容
        const content = contentInput.value.trim();
        previewContent.textContent = content || '请输入内容';
        previewContent.className = content ? '' : 'text-muted';
        
        // 提取并显示变量
        const variables = extractVariables(content);
        if (variables.length > 0) {
            previewVariables.innerHTML = '<small class="text-muted">变量:</small><br>' + 
                variables.map(v => '<span class="variable me-1">{{' + v + '}}</span>').join('');
        } else {
            previewVariables.innerHTML = '';
        }
        
        // 更新标签
        const tags = tagsInput.value.trim();
        if (tags) {
            const tagList = tags.split(',').map(t => t.trim()).filter(t => t);
            previewTags.innerHTML = '<small class="text-muted">标签:</small><br>' + 
                tagList.map(t => '<span class="badge bg-secondary me-1">' + t + '</span>').join('');
        } else {
            previewTags.innerHTML = '';
        }
    }
    
    function extractVariables(content) {
        const regex = /\{\{([^{}]+)\}\}/g;
        const variables = [];
        let match;
        while ((match = regex.exec(content)) !== null) {
            if (!variables.includes(match[1])) {
                variables.push(match[1]);
            }
        }
        return variables;
    }
    
    // 绑定事件
    titleInput.addEventListener('input', updatePreview);
    contentInput.addEventListener('input', updatePreview);
    tagsInput.addEventListener('input', updatePreview);
    
    // 初始化预览
    updatePreview();
});

// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
    const title = document.getElementById('title').value.trim();
    const content = document.getElementById('content').value.trim();
    
    if (!title) {
        e.preventDefault();
        alert('请输入标题');
        document.getElementById('title').focus();
        return;
    }
    
    if (!content) {
        e.preventDefault();
        alert('请输入内容');
        document.getElementById('content').focus();
        return;
    }
});
</script>
{% endblock %}